<template>
	<div class="playheader" v-if="playlists">
		<div class="pylist_bg" :style="{'background-image':'url(//music.163.com/api/img/blur/'+playlists.coverImgId_str+'?param=170y170)'}"></div>
		<div class="pylist_wrap">
			<div class="pylist_fl">
				<base-image :picUrl="playlists.coverImgUrl"></base-image>
				<span class="lsthd_icon">歌单</span>
				<base-earp class="lsthd_num"></base-earp>
			</div>
			<div class="pylist_fr">
				<h2 class="lsthd_title f-thide2 f-brk">
					{{playlists.name}}
				</h2>
				<div class="lsthd_auth f-thide">
					<div class="lsthd_link" v-if="playlists.creator">
						<div class="u-avatar lsthd_ava">
							<base-image :picUrl="playlists.creator.avatarUrl"></base-image>
						</div>
						{{playlists.creator.nickname}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import baseImage from "@/components/base/image.vue";
	import baseEarp from "@/components/base/earup.vue";
	export default {
		props: {
			playlists: Object
		},
		components: {
			baseImage,
			baseEarp
		}
	}
</script>

<style lang="scss">
	.playheader {
		position: relative;
		padding: 30px 10px 30px 15px;
		overflow: hidden;
	}

	.pylist_bg {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50%;
		transform: scale(1.5);
		filter: blur(20px);

		&:after {
			content: " ";
			background-color: rgba(0, 0, 0, .25);
		}
	}

	.pylist_wrap {
		display: flex;
		position: relative;
		z-index: 2;
	}

	.pylist_fl {
		position: relative;
		width: 126px;
		height: 126px;
		background-color: #e2e2e3;
	}

	.pylist_fr {
		-webkit-box-flex: 1;
		flex: 1 1 auto;
		width: 1%;
		margin-left: 16px;
	}

	.lsthd_icon {
		position: absolute;
		z-index: 3;
		top: 10px;
		left: 0;
		padding: 0 8px;
		height: 17px;
		color: #fff;
		font-size: 9px;
		text-align: center;
		line-height: 17px;
		background-color: rgba(217, 48, 48, .8);
		border-top-right-radius: 17px;
		border-bottom-right-radius: 17px;
	}

	.lsthd_num {
		position: absolute;
		right: 2px;
		top: 0;
		z-index: 3;
		padding-left: 15px;
		color: #fff;
		font-size: 12px;
		background-position: 0;
		background-repeat: no-repeat;
		background-size: 11px 10px;
		text-shadow: 1px 0 0 rgba(0, 0, 0, .15);
	}

	.lsthd_title {
		padding-top: 1px;
		font-size: 17px;
		line-height: 1.3;
		color: #fefefe;
		height: 44px;
		display: -webkit-box;
		-webkit-box-pack: center;
	}

	.f-thide2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.f-brk {
		word-wrap: break-word;
		white-space: normal;
	}

	.lsthd_auth {
		display: block;
		position: relative;
		margin-top: 20px;
	}

	.f-thide {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: normal;
	}

	.lsthd_link {
		display: inline-block;
		color: hsla(0, 0%, 100%, .7);
	}

	.u-avatar {
		position: relative;
		width: 100%;
	}

	.lsthd_ava {
		display: inline-block;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 5px;
	}

	.u-avatar>.u-img {
		border-radius: 50%;
	}
</style>
